<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .user-card {
            display: inline-block;
            width: 300px;
            height: 420px;
            border-radius: 10px;
            box-shadow: 0 5px 5px rgba(0,0,0,.2);
            background-color: #f2f2f2;
            margin: 20px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .user-card .header {
            margin-bottom: 10px;
        }

        .user-card .body {
            text-align: center;
        }

        .user-card .footer {
            color: #bbb;
            font-size: 12px;
            text-align: center;
            padding: 0 10px;
        }

        .user-card img {
            width: 100%;
        }
    </style>
  </head>
  <body>
    <div id="app">
        <user-card v-for="user in userList" :key="user.id" v-bind="user"  >

            <template v-slot:body="{username:name, sex}">
                <h3>{{name}} | {{sex==='m'?'男':'女'}} </h3>
            </template>
              
            <template v-slot:footer="{username:name, sex}">
                <!-- {{name}} -->
            </template>

        </user-card>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./api.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        Vue.component('UserCard', {
            // template: `<div class="user-card">
            //         <div class="header">
            //             <slot name="header">
            //                 <img :src="img">    
            //             </slot>    
            //         </div>
            //         <div class="body">
            //             <slot name="body" :username="name" :sex="sex">
            //                <h3>{{name}}</h3>
            //             </slot>    
            //         </div>
            //         <div class="footer">
            //             <slot name="footer">
            //                <p>{{des}}</p>
            //             </slot>    
            //         </div>
            //     </div>`,

            template:`<div class="footer">
                        <slot name="footer" :username="name" :sex="sex"> 
                           <p>{{des}}</p>
                        </slot>    
                      </div>`,

            props: ["id", "name", "des","sex","img"]
        })



      var vm = new Vue({
        el: "#app",
        data: {
          userList: []
        },
        created() {
            var that = this;
            $.ajax({
                url: '/user',
                success(data) {
                    that.userList = JSON.parse(data)
                }
            })
        }
      });

    </script>
  </body>
</html>